<!DOCTYPE html>
<html lang="en">

<head>
    <title>设备</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../css/global.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/equipment.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <link rel="stylesheet" href="../css/nutui/dist/nutui.css">
    <script src="../css/nutui/dist/nutui.js"></script>
</head>

<body>
    <div id="app">
        <div class="app_header">
            <div class="app_headerTitle">设备</div>
        </div>
        <div class="app_tab">
            <div class="app_tabLeft">
                <div :class="[tabState == 1?'app_tabLeftActive':'']" @click="tabState = 1">全部</div>
                <div :class="[tabState == 2?'app_tabLeftActive':'']" @click="tabState = 2">使用中</div>
                <div :class="[tabState == 3?'app_tabLeftActive':'']" @click="tabState = 3">闲置中</div>
                <div :class="[tabState == 4?'app_tabLeftActive':'']" @click="tabState = 4">已报废</div>
            </div>
            <div class="app_tabRight">
                <div @click="addressShow = true">片区<span class="iconfont icon-arrow-down-bold"></span></div>
                <div @click="show = true">筛选<span class="iconfont icon-arrow-down-bold"></span></div>
            </div>
        </div>
        <div class="app_main">
            <div class="app_mainItem" v-for="(item, index) in 10" @click="goEquipmentDetail">
                <div class="app_mainItemLeft">
                    <div class="stateDom1">使用中</div>
                </div>
                <div class="app_mainItemRight">
                    <div class="title str">ALCW智能型无负压供水设备</div>
                    <span class="tabs str">无负压变频供水</span>
                    <div class="note str">所属泵房：奥特莱斯广场泵房1</div>
                </div>
            </div>
            <div class="app_mainItem" v-for="(item, index) in 10" @click="goEquipmentDetail">
                <div class="app_mainItemLeft">
                    <div class="stateDom2">闲置中</div>
                </div>
                <div class="app_mainItemRight">
                    <div class="title str">ALCW智能型无负压供水设备</div>
                    <div class="tabs str">无负压变频供水</div>
                    <div class="note str">所属泵房：奥特莱斯广场泵房1</div>
                </div>
            </div>
        </div>
        <div id="add_form" class="add" @click="goAddEquipmentPage"><span class="iconfont icon-add-bold"></span></div>
        <nut-tabbar @tab-switch="tabSwitch" :tabbar-list="tabList" :bottom="true">
        </nut-tabbar>
        <!-- 片区选择 弹窗 -->
        <nut-popup v-model="addressShow" position="bottom" :style="{ height: '100vh' }">
            <div class="popupTitle">
                <div class="left" @click="addressShow = false">
                    <span class="iconfont icon-close-bold"></span>
                </div>
                <div class="title">片区选择</div>
            </div>
            <div class="popup_main">
                <div class="popup_mainList">
                    <div class="popup_mainListItem str active">长沙</div>
                    <div class="popup_mainListItem str">株洲</div>
                    <div class="popup_mainListItem str">湘潭</div>
                    <div class="popup_mainListItem str">岳阳</div>
                </div>
                <div class="popup_mainList">
                    <div class="popup_mainListItem active">全部</div>
                    <div class="popup_mainListItem str">芙蓉区</div>
                    <div class="popup_mainListItem str">天心区</div>
                    <div class="popup_mainListItem str">岳麓区</div>
                    <div class="popup_mainListItem str">开福区</div>
                    <div class="popup_mainListItem str">雨花区</div>
                    <div class="popup_mainListItem str">望城区</div>
                    <div class="popup_mainListItem str">长沙县</div>
                    <div class="popup_mainListItem str">宁乡市</div>
                    <div class="popup_mainListItem str">浏阳市</div>
                </div>
                <div class="popup_mainList">
                    <div class="popup_mainListItem active">全部</div>
                    <div class="popup_mainListItem str">新开铺街道</div>
                    <div class="popup_mainListItem str">城南路街道</div>
                    <div class="popup_mainListItem str">文源街道</div>
                    <div class="popup_mainListItem str">金盆岭街道</div>
                    <div class="popup_mainListItem str">先锋街道</div>
                    <div class="popup_mainListItem str">坡子街街道</div>
                    <div class="popup_mainListItem str">青园街道</div>
                    <div class="popup_mainListItem str">桂花坪街道</div>
                    <div class="popup_mainListItem str">暮云街道</div>
                    <div class="popup_mainListItem str">黑石铺街道</div>
                    <div class="popup_mainListItem str">大坨铺街道</div>
                    <div class="popup_mainListItem str">南拖街道</div>
                    <div class="popup_mainListItem str">金盆岭街道</div>
                    <div class="popup_mainListItem str">先锋街道</div>
                </div>
            </div>
            <div class="popupBtn">
                <div class="exit" @click="addressShow = false">取消</div>
                <div class="submit" @click="addressShow = false">确定</div>
            </div>
        </nut-popup>
        <!-- 筛选 弹窗 -->
        <nut-popup v-model="show" position="bottom" :style="{ height: '100vh' }">
            <div class="popupTitle">
                <div class="left" @click="show = false">
                    <span class="iconfont icon-close-bold"></span>
                </div>
                <div class="title">筛选</div>
            </div>
            <div class="popup_main column">
                <div class="popup_mainTitle">设备状态</div>
                <div class="popup_mainInfo">
                    <nut-row :gutter="10">
                        <nut-col :span="6">
                            <div class="popup_mainInfoItemActive str">全部</div>
                        </nut-col>
                        <nut-col :span="6">
                            <div class="popup_mainInfoItem str">使用中</div>
                        </nut-col>
                        <nut-col :span="6">
                            <div class="popup_mainInfoItem str">闲置中</div>
                        </nut-col>
                    </nut-row>
                </div>
                <div class="popup_mainTitle">设备厂房</div>
                <nut-row :gutter="20">
                    <nut-col :span="24">
                        <div class="popup_mainInfoItemActive str">ALCW智能型无负压供水设备1</div>
                    </nut-col>
                    <nut-col :span="24">
                        <div class="popup_mainInfoItem str">ALCW智能型无负压供水设备2</div>
                    </nut-col>
                    <nut-col :span="24">
                        <div class="popup_mainInfoItem str">ALCW智能型无负压供水设备3</div>
                    </nut-col>
                </nut-row>
            </div>
            <div class="popupBtn">
                <div class="exit" @click="show = false">取消</div>
                <div class="submit" @click="show = false">确定</div>
            </div>
        </nut-popup>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                tabList: [],
                tabState: 1,
                addressShow: false,
                show: false
            },
            mounted() {
                this.getTablistInfo()
            },
            methods: {
                goEquipmentDetail() {
                    window.location.href = './equipmentDetail.html'
                },
                goAddEquipmentPage() {
                    window.location.href = './addEquipment.html'
                },
                tabSwitch(value, index) {
                    console.log('当前tab点击' + value + '-----' + index)
                },
                getTablistInfo() {
                    axios('../json/tabbar.json').then((res => {
                        let tabList = res.data.data
                        tabList.map((item, index) => {
                            if (item.tabTitle == '设备') {
                                item.curr = true
                            } else {
                                item.curr = false
                            }
                        })
                        this.tabList = tabList
                    }))
                }
            }
        })
    </script>
</body>

</html>